<template>
  <div class="view-wrapper">
    <el-card>
      <el-form>
        <el-row :gutter="20">
          <el-col :span="2">
            <span class="lbl-project">审核状态:</span>
          </el-col>
          <el-col :span="4">
            <el-select style="width: 100%" v-model="searchParams.authStatus">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input placeholder="公司名称" v-model="searchParams.name" @keyup.native.enter="doQuery"></el-input>
          </el-col>
          <el-col :span="14" style="text-align: right">
            <el-button type="primary" @click="doQuery">
              <span class="el-icon-search"></span> 筛选
            </el-button>
          </el-col>
        </el-row>
        <div class="divide-block"></div>
        <el-row :gutter="20">
          <el-table border stripe :data="result" v-loading="loading" element-loading-text="获取数据中..."
                    element-loading-spinner="el-icon-loading">
            <el-table-column align="center" label="公司名称" prop="name"></el-table-column>
            <el-table-column align="center" label="公司地址" prop="detail_address"></el-table-column>
            <el-table-column align="center" label="申请时间" width="180">
              <template scope="scope">
                <span>{{new Date() | DateFormat}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="审核状态" width="120" prop="auth_status">
              <template scope="scope">
                <el-tag type="success"  v-if="scope.row.auth_status === 1">通过</el-tag>
                <el-tag type="warning" v-if="scope.row.auth_status === 2">等待审核</el-tag>
                <el-tag type="danger" v-if="scope.row.auth_status === 0">未通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="120">
              <template scope="scope">
                <el-button type="primary" size="small" @click="CheckUnit(scope.row.id)">
                  <span class="el-icon-search"></span> 认证信息
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <table-pagination :data-total="searchParams.total" :page-size="searchParams.limit" @size-change="handleSizeChange"  @current-change="handleCurrentChange" :size-options="[5,10,25,50,100]"></table-pagination>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import uitlsApi from '@/api/utils'
  export default {
    name: 'Construction',
    data: () => ({
      loading: false,
      searchParams: {
        page: 1,
        limit: 10,
        total: 0,
        name: '',
        authStatus: '',
        last: ''
      },
      result: [],
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未通过',
          value: 0
        }, {
          label: '通过',
          value: 1
        }, {
          label: '审核中',
          value: 2
        }
      ]
    }),
    components: {
      TablePagination
    },
    mounted () {
      this.doSearch({
        page: this.searchParams.page,
        limit: this.searchParams.limit,
        type: 'construct'
      })
    },
    watch: {
      'searchParams.authStatus': function (newValue, oldValue) {
        var params = {
          page: this.searchParams.page,
          limit: this.searchParams.limit,
          type: 'construct'
        }
        if (!this.$Utils.isNullOrEmpty(newValue)) {
          params.authStatus = newValue
        }
        this.doSearch(params)
      },
      'searchParams.limit': function (newValue, oldValue) {
        this.doSearch(this.searchParams)
        console.log(this.searchParams.limit)
      },
      'searchParams.page': function (newValue, oldValue) {
        this.doSearch(this.searchParams)
      }
    },
    methods: {
      doQuery () {
        if (this.searchParams.last !== this.searchParams.name) {
          var params = {
            page: this.searchParams.page,
            limit: this.searchParams.limit,
            type: 'construct'
          }
          if (this.searchParams.name !== '') {
            params.name = this.searchParams.name
          }
          this.doSearch(params)
          this.searchParams.last = this.searchParams.name
        }
      },
      doSearch (params) {
        this.loading = true
        uitlsApi.getCompanyList(params).then(res => {
          this.loading = false
          this.result = []
          if (res.data.data) {
            res.data.data.forEach(item => {
              this.result.push(item)
            })
            this.searchParams.total = res.data.meta.pagination.total
          }
        }, err => {
          this.loading = false
          this.$message({
            type: 'error',
            message: err.response.data.message
          })
        })
      },
      handleSizeChange (data) {
        debugger
        this.searchParams.limit = data.val
        console.log(this.searchParams.limit)
      },
      handleCurrentChange (data) {
        debugger
        this.searchParams.page = data.val
      },
      CheckUnit (data) {
        debugger
        this.$router.push({ name: 'UnitDetail', params: {uId: data} })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
</style>
